{extend name="base"/}
{block name="content"}
<div id="header-frame">
    {include file="public:top" /}
    <script type='text/javascript' src='__STATIC__/admin/uploadajax/js/jquery-2.0.3.min.js'></script>
    <script type='text/javascript' src='__STATIC__/admin/uploadajax/js/jquery.form.js'></script>
    <link href="__STATIC__/admin/uploadajax/css/style.css" type="text/css" rel="stylesheet"/>
	<link href="__STATIC__/admin/css/specific.css" type="text/css" rel="stylesheet"/>
</div>
<div id="frame-body">
    <div id="menu-frame" style="width: 100%;float: left;">
        {include file="public:menu" /}
    </div>
    <div id="main-frame" style="float: left;">
        <div id="dcMain" style="margin-left: 20px;width: 1682px;">
            <div id="urHere">DouPHP 管理中心<b>></b><strong>商品规格</strong> </div>   <div class="mainBox" style="height:auto!important;height:550px;min-height:550px;">
            <h3>商品规格</h3>
            <form id='myupload' action="{:url('banner/uploadifyImg')}" method='post' enctype='multipart/form-data'>
   					<table width="100%" class="tableBasic">
   						<tr>
   							<th class="product">产品</th>
   							<th class="attribute">属性</th>
   							<th colspan="2">规格</th>
   						</tr>
   						<tr>
   							<td  align="center">{$productsData['products_name']}</td>
   							<td align="center" colspan="3">产品属性添加</td>
   						</tr>
   						<tr>
   					    	<td></td>
   							<td class="attribute"><input class="attributeInput" _attr="1" type="text" name="type1[]"/></td>
   							<td class="buttonOn">  							
   								<ul class="specificationsUl">
   									<li>
   										<div class="span">
	   										<input class="specifications"  name="speci1[]" type="text"/>
	   									</div>
	   																			  										
   										<div class="uploadDiv">
				                        	<div>
				                        		<img class="file_img" src="__STATIC__/admin/images/icon-add.png" style="width:120px;"/>
				                                <div class="progress">
				                                    <div class="progress-bar" ><span class="percent"></span></div>
				                                </div>
				                        	</div>	
				                        	<input type="file" class="changeImg" name="images"/>
                        			    	<input type="hidden" name="img1[]"  class="proimg" value=""/>
				                      </div>  					                        
	   									<div> 										  										
											<a class="close">删除规格</a>    																			
	   									</div>
   									</li>
   									<li>
   										<a class="specificationsAdd">添加规格</a>
   									</li>
   								</ul>  								   				 								
   							</td>
   							<td class="buttonOn buttonOnDel"  align="center">
   								<a class="attributeDel">删除属性</a>
   							</td>
   						</tr>
   						<tr>
   							<td align="center" class="buttonOn" colspan="4">
   								<a class="attributeAdd">添加属性</a>
   							</td>
   						</tr>
   						<tr>                        
	                        <td colspan="4">
                                <input type="hidden" name="urlRoute" value="products/imgs"/>
								<input type="hidden" name="products_id" value="{$productsData['products_id']}"/>
	                            <input class="dataNum" type="hidden" name="token" value="1"/>
	                            <input class="dataMaxNum" type="hidden" name="tokenMax" value="1"/>	                           
	                            <input  class="btn" type="button" onclick='specific_add(this)'  value="提交" />
	                        </td>
                    	</tr>
   					</table>
                <script type="text/javascript">
                    $(".tableBasic").on("change",".changeImg",function(){
                        var that=this;
                        var progress = $(this).prev().children(".progress");
                        var progress_bar = progress.children(".progress-bar");
                        var percent = progress_bar.children('.percent');
                        $("#myupload").ajaxSubmit({
                            dataType:  'json', //数据格式为json
                            beforeSend: function() { //开始上传
                                progress.show();
                                var percentVal = '0%';
                                progress_bar.width(percentVal);
                                percent.html(percentVal);
                            },
                            uploadProgress: function(event, position, total, percentComplete) {
                                var percentVal = percentComplete + '%'; //获得进度
                                progress_bar.width(percentVal); //上传进度条宽度变宽
                                percent.html(percentVal); //显示上传进度百分比
                            },
                            success: function(data) {
                                console.log(data);
                                if(data.state == 1){
                                    var src = data.path;
                                    $(that).prev().children("img").attr('src',src);
                                    $(that).next(".proimg").val(src);
                                    //$(".res").html("上传图片"+data.name+"成功，图片大小："+data.size+"K,文件地址："+data.url);
                                }else{
                                    $(".res").html(data.errmsg);
                                }
                                progress.hide();
                            },
                            error:function(xhr){ //上传失败
                                alert("上传失败");
                                progress.hide();
                            }
                        });
                    })
                </script>
            </form>
        </div>
        </div>
        <script type="text/javascript">
        	function specific_add(that){
				var attributeInput=$(".attributeInput");
				var specifications=$(".specifications");
				for(var i=0;i<attributeInput.length;i++){
					attributeInputVal=attributeInput.eq(i).val()
					if(attributeInputVal==""){
                        dialog.error('输入有误');
                        return;
					}
				}
				for(var i=0;i<specifications.length;i++){
					specificationsVal=specifications.eq(i).val()
					if(specificationsVal==""){
                        dialog.error('输入有误');
						return;
					}
				}
			var  products_id={$productsData['products_id']};
             var success_url="{:url('admin/product/product_specific')}?pid="+products_id;
            var url="{:url('admin/product/specific')}";
            var admins=$("#myupload").serialize();
           var data_btn_val=$(that).attr("_id")
              var data_btn=$.param({data_btn:data_btn_val})
             var data=admins+"&"+data_btn
                 $.post(url,data,function(result){

                     if(result.status=='4')
                    {
                         dialog.success(result.message,success_url);
                   }else
                     {
                         dialog.error(result.message);
                    }
                 })
            }
            $(".tableBasic").on("click",".attributeDel",function(){
            	var attributeInput=$(".attributeInput").length;        
            	var abc=$(this).parents("tr").siblings();
            	console.log(attributeInput)
            	console.log(abc.length)
            	if(abc.length!=4){
            		$(".dataNum").val(attributeInput-1)
            		$(this).parents("tr").remove();           	
            	}else{
            		$(".dataNum").val(attributeInput)            	
            	}
            })
            $(".tableBasic").on("click",".close",function(){
            	var def=$(this).parents("li").siblings();
            	if(def.length!=1){
            		$(this).parents("li").remove();
            	}    
            })
            var num=1;
            $(".tableBasic").on("click",".attributeAdd",function(){	
            	num=num+1;
            	var str='<tr>'
   					    	+'<td></td>'
   							+'<td class="attribute"><input class="attributeInput" _attr="'+num+'" type="text" name="type'+num+'[]"/></td>'
   							+'<td class="buttonOn">'  							
   								+'<ul class="specificationsUl">'
   									+'<li>'
   										+'<div class="span">'
	   										+'<input class="specifications"  name="speci'+num+'[]" type="text"/>'
	   									+'</div>'	   																			  										
   										+'<div class="uploadDiv">'
				                        	+'<div>'
				                        		+'<img class="file_img" src="__STATIC__/admin/images/icon-add.png" style="width:120px;"/>'
				                                +'<div class="progress">'
				                                    +'<div class="progress-bar" ><span class="percent"></span></div>'
				                                +'</div>'
				                        	+'</div>'	
				                        	+'<input type="file"   class="changeImg" name="images"/>'
                        			    	+'<input type="hidden" name="img'+num+'[]"  class="proimg" value=""/>'
				                       +'</div>'  					                        	   									   									
	   									+'<div>'										  										
											+'<a class="close">删除规格</a>'																			
	   									+'</div>'
   									+'</li>'
   									+'<li>'
   										+'<a class="specificationsAdd">添加规格</a>'
   									+'</li>'
   								+'</ul>'							   				 								
   							+'</td>'
   							+'<td class="buttonOn buttonOnDel"  align="center">'
   								+'<a class="attributeDel">删除属性</a>'
   							+'</td>'
   						+'</tr>'
            	$(this).parents("tr").before(str)
            	var attributeInput=$(".attributeInput").length; 
            	$(".dataNum").val(attributeInput)
                $(".dataMaxNum").val(num)
            })
            $(".tableBasic").on("click",".specificationsAdd",function(){  
            	var signNum=$(this).parents("tr").find(".attributeInput").attr("_attr");
            	var str='<li>'
							+'<div class="span">'
								+'<input class="specifications"  name="speci'+signNum+'[]" type="text"/>'
							+'</div>'																  										
							+'<div class="uploadDiv">'
	                        	+'<div>'
	                        		+'<img class="file_img" src="__STATIC__/admin/images/icon-add.png" style="width:120px;"/>'
	                                +'<div class="progress">'
	                                    +'<div class="progress-bar" ><span class="percent"></span></div>'
	                                +'</div>'
	                        	+'</div>'	
	                        	+'<input type="file" class="changeImg"  name="images"/>'
            			    	+'<input type="hidden" name="img'+signNum+'[]"  class="proimg" value=""/>'
	                       +'</div>'  					                        
								   									
							+'<div>'										  										
								+'<a class="close">删除规格</a>'																			
							+'</div>'
						+'</li>';
            	$(this).parent().before(str)
            })
            $(".tableBasic").on("change",".changeImg",function(){
        	    var that=this;
                var progress = $(this).prev().children(".progress");
                var progress_bar = progress.children(".progress-bar");
                var percent = progress_bar.children('.percent');
                $("#myupload").ajaxSubmit({
                    dataType:  'json', //数据格式为json
                    beforeSend: function() { //开始上传
                        progress.show();
                        var percentVal = '0%';
                        progress_bar.width(percentVal);
                        percent.html(percentVal);
                    },
                    uploadProgress: function(event, position, total, percentComplete) {
                        var percentVal = percentComplete + '%'; //获得进度
                        progress_bar.width(percentVal); //上传进度条宽度变宽
                        percent.html(percentVal); //显示上传进度百分比
                    },
                    success: function(data) {
                        console.log(data);
                        if(data.state == 1){
                            var src = data.path;
                            $(that).prev().children("img").attr('src',src);
                            $(that).next(".proimg").val(src);
                            //$(".res").html("上传图片"+data.name+"成功，图片大小："+data.size+"K,文件地址："+data.url);
                        }else{
                            $(".res").html(data.errmsg);
                        }
                        progress.hide();
                    },
                    error:function(xhr){ //上传失败
                        alert("上传失败");
                        progress.hide();
                    }
                });
            })
        </script>
        {/block}